<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16.event</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">
  class Form extends React.Component{
      /*even.target获得触发回调函数的DOM元素，这样可以通过回调函数即可获得当前的DOM元素
      * 避免使用ref去为DOM元素标识*/

      /*但使用even.target.value只能获得回调函数所绑定的DOM元素 不能通过该回调函数获得其他DOM元素
      *
      * 也就是说DOM元素如果想通过event的方式返回只能在当前DOM元素中定义事件函数，如果当前DOM元素上没有定义
      * 事件函数那就只能通过ref返回当前DOM元素
      * */

      /*
      * 如果需求是获取当前DOM元素中的某个值。首先想到的应该是是否可以为当前DOM元素定义函数。
      * 通过event.target的方式获得当前DOM元素的值，如若不能就要是有ref的回调函数形式，
      * 将当前DOM映射到类似组件的某个变量中(属性)
      * */
      getVal1 =(event)=>{
          console.log(event.target.value);

      }
      getVal2 =(event)=>{
          console.log(event.target.value);


      }


      render(){
          return(
              <div>
                  <input type="text"/>
                  <input type="button" value="提交" onClick={this.getVal1}/>
                  <input type="text" onBlur={this.getVal2}/>
              </div>
          )
      }
  }

  ReactDOM.render(<Form/>,document.getElementById("app"))
</script>
</body>
</html>